import GeekIcon from "@shared/geekIcon";
import React from "react";
import { SuggestionType } from "@pages/search/widgets/suggestion";
import { useTypedDispatch } from "@store/index";
import { useNavigate } from "react-router-dom";
import { addHistory } from "@slice/history";

interface Props {
  suggestion: SuggestionType;
}

export default function SuggestionItem({ suggestion }: Props) {
  const dispatch = useTypedDispatch();
  const navigate = useNavigate();
  return (
    <li
      onClick={() => {
        dispatch(addHistory({ name: suggestion.origin }));
        navigate(`/search/${suggestion.origin}`);
      }}
    >
      <GeekIcon type={"iconbtn_search"} />
      <div dangerouslySetInnerHTML={{ __html: suggestion.name }}></div>
    </li>
  );
}
